<template>
  <div id="serach">
    <form action="/">
        <van-search
            v-model="value"
            show-action
            :placeholder="keyword1"
            @search="onSearch"
            @cancel="onCancel"
            @input="onInput"
        />
    </form>
     <!-- 使用三组件 完成搜索 -->
     <Histoty v-show="showSerach==1" :history="history" :hotgood="hotgood" @getval="getData"></Histoty>
     <Hotlist v-show="showSerach==2" :listdata="serachList" @getval="getData"></Hotlist>
     <Googlist v-show="showSerach==3" :goodlist="goodlist" @jia="jiage" ></Googlist>
  </div>
</template>  

<script>
  //引入组件 加请求方法
import Histoty from "../components/HistoryHot.vue"
import Hotlist from "../components/SearchGoodsList.vue"
import Googlist from "../components/SearchList.vue"
import {GetHistory,GetSerachlist,GetGoodlist} from "@/request/api.js"

export default {
    
  data () {
    return {
        value:"",
        showSerach:'1',
        keyword1:'',
        history:[],
        hotgood:[],
        serachList:[],
        goodlist:[],
    }
  },
  methods:{
    
    //回车
    onSearch() {
       this.showSerach=3
       GetGoodlist({keyword:this.value}) 
       .then(res=>{
         this.goodlist=res.data.data
       })
       .catch(err=>{
        console.log(err);
       })
    },
    //取消
    onCancel() {
      this.$router.go(-1)

    },
    //输入
    onInput(){
    this.showSerach=2
     GetSerachlist({keyword:this.value})
     .then(res=>{
      //  console.log(res);
       this.serachList=res.data
     })
     .catch(err=>{
       console.log(err);
     })
      
    },
    //点击数据进行跳转
    getData(val){
      this.showSerach=3
      this.value=val
      GetGoodlist({keyword:this.value}) 
       .then(res=>{
         this.goodlist=res.data.data
       })
       .catch(err=>{
        console.log(err);
       })
    },
    // 价格
    jiage(v){
      GetGoodlist({keyword:this.value,order:v,sort:'price'}) 
      .then(res=>{
         this.goodlist=res.data.data
       })
       .catch(err=>{
        console.log(err);
       })
    },
    fenlei(v){
      GetGoodlist({keyword:this.value,order:v,sort:'price'}) 
      .then(res=>{
         this.goodlist=res.data.data
       })
       .catch(err=>{
        console.log(err);
       })
    },
    

  },
  created(){
    // 历史记录
    GetHistory()
    .then(res=>{     
        // console.log(res);   
        this.keyword=res.data.defaultKeyword.keyword
        this.history=res.data.historyKeywordList
        this.hotgood=res.data.hotKeywordList

    })
    .catch(err=>{
     console.log(err);
    })
  },
  components:{
    Histoty,
    Hotlist,
    Googlist,
  },
  

}
</script>

<style>
   #serach{
     background-color: #efefef;
     width: 100%;
     height: 100%;
     position: absolute;
     top: 0;
     left: 0;
     right: 0;
     bottom: 0;
     margin: auto;
   }
</style>